<template>
  <div class="properties-item__content">
    <el-form v-model="userTaskInfo" :inline="false" label-width="100px" size="small" label-position="right">
      <el-form-item label="执行用户:">
        <el-select v-model="userTaskInfo.assignee" @change="updateUserTaskInfo('assignee')">
          <el-option v-for="user in userList" :key="user.id" :label="user.name" :value="user.id"/>
        </el-select>
      </el-form-item>
      <el-form-item label="候选用户:">
        <el-select v-model="userTaskInfo.candidateUsers" multiple collapse-tags @change="updateUserTaskInfo('candidateUsers')">
          <el-option v-for="user in userList" :key="user.id" :label="user.name" :value="user.id"/>
        </el-select>
      </el-form-item>
      <el-form-item label="候选分组:">
        <el-select v-model="userTaskInfo.candidateGroups" multiple collapse-tags @change="updateUserTaskInfo('candidateGroups')">
          <el-option v-for="userGroup in userGroupList" :key="userGroup.id" :label="userGroup.name" :value="userGroup.id"/>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import processHelper from '@/components/process-designer/helper/ProcessHelper'

  export default {
    name: 'UserTask',
    props: {
      processModeler: {  // 流程Modeler
        type: Object,
        required: true
      },
      processInfo: {    // 流程基础信息
        type: Object,
        required: true
      },
      activeElement: {  // 当前选中元素
        type: Object,
        required: true
      }
    },
    data() {
      return {
        userList: null,
        userGroupList: null,
        userTaskInfo: {
          assignee: '',        // 执行用户
          candidateUsers: '',  // 候选用户
          candidateGroups: ''  // 候选分组
        }
      }
    },
    watch: {
      activeElement: {
        handler() {
          if (this.activeElement) {
            let businessObject = this.activeElement.businessObject
            this.userTaskInfo = JSON.parse(JSON.stringify(businessObject))
          }
        },
        deep: true,
        immediate: true
      }
    },
    created() {
      this.initUserList()
      this.initUserGroupList()
    },
    methods: {
      initUserList() {
        this.userList = [
          { id: '01', name: '用户1' },
          { id: '02', name: '用户2' },
          { id: '03', name: '用户3' },
          { id: '04', name: '用户4' },
          { id: '05', name: '用户5' }
        ]
      },
      initUserGroupList() {
        this.userGroupList = [
          { id: '01', name: '用户分组1' },
          { id: '02', name: '用户分组2' },
          { id: '03', name: '用户分组3' },
          { id: '04', name: '用户分组4' },
          { id: '05', name: '用户分组5' }
        ]
      },
      updateUserTaskInfo(key) {
        const properties = Object.create(null)
        properties[key] = this.userTaskInfo[key]
        processHelper.updateProperties(this.activeElement, properties)
      }
    }
  }
</script>
<style lang='scss'>
</style>
